<template>
  <!-- 人声模型列表 -->
  <view>
    <view class="list">
      <z-paging ref="paging" v-model="list" @query="queryList" :fixed="false" :auto-clean-list-when-reload="false" :auto="true" :paging-style="{ height: '100%' }" :show-refresher-when-reload="true" :default-page-size="10" :hide-empty-view="true">
        <view class="box1">
          <view class="box_item1" @click="change(item)" :class="item.digitalId === digitalId ? 'act' : ''" v-for="(item, index) in list" :key="index">
            <view class="zl-flex zl-row-between">
              <view class="zl-flex">
                <image :src="item.coverUrl" mode="aspectFill" class="play" style="width: 80rpx; height: 80rpx; border-radius: 8rpx"> </image>
                <view class="zl-flex-col zl-m-l-18">
                  <view class="zl-font-30 zl-color-000"> {{ item.name }} </view>
                  <view class="zl-font-20 zl-color-999 zl-m-t-8" style="opacity: 0.6">
                    {{ $util.fomateDate(item.createTime * 0.001) }}
                  </view>
                </view>
                <image v-show="item.digitalId === digitalId" style="position: absolute; bottom: -2rpx; right: -2rpx; width: 50rpx" src="/static/clone/choosed.png" mode="widthFix"></image>
              </view>
              <view class="zl-flex">
                <view @click.stop="playVideo(item)" class="download"> <image src="/static/work/listen.png" mode="" style="width: 25rpx; height: 25rpx; margin-right: 6rpx"></image> 预览 </view>
                <!-- <view @click.stop="del(item)" class="edit">
									删除
								</view> -->
              </view>
            </view>
            <view class="box_active" v-if="!item.isAuth"> </view>
            <view v-if="!item.isAuth" @click="toAuth" class="zl-flex zl-row-center zl-col-center zl-font-24" style="position: absolute; top: 50%; transform: translateY(-50%); right: 30rpx; border-radius: 10rpx; background-color: #ccc; width: 121rpx; border: 1rpx solid #ccc; height: 56rpx">
              <image src="/static/new/btn_shouquan.png" mode="" style="width: 25rpx; height: 25rpx; margin-right: 6rpx"></image>
              授权
            </view>
            <image src="/static/new/icon_shouquan.png" v-if="!item.isAuth" style="position: absolute; top: 0; left: 0; width: 100rpx; height: 100rpx" mode=""></image>
          </view>

          <view v-if="list.length <= 0" class="zl-flex-col zl-col-center" style="width: 690rpx; margin-top: 50%">
            <image src="../../static/work/empty.png" mode="widthFix" style="width: 230rpx; margin-bottom: 48rpx"></image>
            <text class="zl-font-30 zl-color-666">空空如也，您还没有创建哦~</text>
          </view>
        </view>
      </z-paging>
    </view>
    <view class="footer zl-flex zl-row-center">
      <view class="btn" @click="sure()"> 确定 </view>
    </view>
    <uni-popup background-color="#fff" ref="pop" type="bottom" border-radius="20rpx 20rpx 0 0">
      <view class="pop-box">
        <view class="pop-top zl-flex zl-row-between">
          <view class="video_poo_title">预览</view>
          <image @click="closeVideo()" style="width: 30rpx" src="/static/icon/pop_close.png" mode="widthFix"> </image>
        </view>
        <view class="popup-video">
          <video v-if="isVideo" :src="activeVideo.url" :controls="true"></video>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      digitalId: 0,
      isVideo: false,
      activeVideo: {},
      coverUrl: ''
    }
  },
  onLoad(opt) {
    if (opt.digitalId) {
      this.digitalId = parseInt(opt.digitalId)
    }
  },
  methods: {
    toAuth() {
      getApp().globalData.isReload = true
      getApp().globalData.cloneType = 1
      uni.switchTab({
        url: '/pages/myClone/myClone'
      })
    },
    change(item) {
      if (!item.isAuth) {
        return
      }
      console.log(item)
      if (item.status === 3) {
        return this.$util('训练失败，请选择其他模型！')
      }
      this.digitalId = item.digitalId
      this.coverUrl = item.coverUrl
    },
    queryList(page, limit) {
      this.api.clone
        .getdigitalmodellist({
          page: page,
          limit: limit,
          status: 0
        })
        .then((res) => {
          if (res.code === 0) {
            this.$refs.paging.complete(res.data.list)
          } else {
            this.$refs.paging.complete(false)
            this.$util.msg(res.msg)
          }
        })
        .catch((err) => {
          this.$refs.paging.complete(false)
          this.$util.msg('请检查网络连接！')
        })
    },
    playVideo(item) {
      this.api.userfile
        .geturl({
          mateId: item.mateId
        })
        .then((res) => {
          if (res.code === 0) {
            this.isVideo = true
            this.activeVideo = res.data
            this.$refs.pop.open()
          } else {
            this.$util.msg(res.msg)
          }
        })
        .catch((err) => {
          this.$util.msg('请检查网络连接！')
        })
    },
    closeVideo() {
      setTimeout(() => {
        this.activeVideo = {}
        this.isVideo = false
      }, 250)
      this.$refs.pop.close()
    },
    sure() {
      if (this.digitalId <= 0) {
        return this.$util.msg('请选择模型！')
      }
      uni.$emit('choosedigitalModelId', {
        digitalId: this.digitalId,
        coverUrl: this.coverUrl
      })
      uni.navigateBack()
    },
    del(item) {}
  }
}
</script>
<style lang="scss" scoped>
.list {
  margin: 0 30rpx;
  width: 750rpx;
  height: calc(100vh - 190rpx);
  background-color: #edf0f4;

  .box {
    display: flex;
    flex-direction: row;
    gap: 30rpx;
    flex-wrap: wrap;

    .box_item {
      width: 330rpx;

      .video {
        width: 100%;
        height: 486rpx;
      }

      .content {
        background-color: #fff;
        padding: 24rpx 30rpx;
        border-radius: 0rpx 0rpx 10rpx 10rpx;
      }
    }
  }

  .box1 {
    width: 690rpx;
    border-radius: 20rpx;

    .act {
      border: 5rpx solid #eb5e00 !important;
    }

    .box_active {
      position: absolute;
      top: -2rpx;
      left: -2rpx;
      background-color: #000;
      opacity: 0.2;
      width: 690rpx;
      height: 160rpx;
      border-radius: 20rpx;
    }

    .box_item1 {
      padding: 40rpx 30rpx;
      // height: 160rpx;
      margin-top: 30rpx;
      display: flex;
      flex-direction: column;
      background: #ffffff;
      border-radius: 20rpx;
      border: 5rpx solid #fff;
      position: relative;

      .line {
        margin-top: 40rpx;
        width: 633rpx;
        height: 1rpx;
        border: 1rpx solid #979797;
        opacity: 0.2;
      }

      .content {
        margin-top: 30rpx;
        font-size: 24rpx;
        color: #999999;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }

  .download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 121rpx;
    height: 56rpx;
    background: #ffffff;
    border-radius: 10rpx;
    border: 2rpx solid #000000;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
  }

  .edit {
    margin-left: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85rpx;
    height: 56rpx;
    background: #ffffff;
    border-radius: 10rpx;
    border: 1rpx solid #000000;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
  }
}

.btn {
  background-color: #ffffff;
  margin-bottom: 30rpx;
  height: 120rpx;
  border-radius: 10rpx;
  color: #131415;
  font-weight: 500;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 190rpx;
  background: #ffffff;

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 690rpx;
    height: 110rpx;
    background: linear-gradient(90deg, #000 0%, #000 100%);
    box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(66, 106, 171, 0.29);
    border-radius: 20rpx;
    font-size: 36rpx;
    color: #f9f9f9;
  }
}

.pop-box {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;

  .pop-top {
    height: 120rpx;
    padding: 0 30rpx;
    border-bottom: 1px solid #ddd;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #131415;
  }

  .video_poo_title {
    width: 100%;
    text-align: center;
    font-size: 30rpx;
    font-weight: 500;
  }

  .popup-video {
  }

  .popup-video video {
    width: 100%;
    height: 80vh;
  }
}
</style>
